<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_k4p96so6jye.css">
    <title>Document</title>
    <style>
        .floatbtn{
            width: 90px;
            height: 90px;
            position: fixed;
            right: 20px;
            bottom: 50px;
            border-radius: 50%;
            text-align: center;
            background-color: blue;
        }
        .floatbtn .txt{
            color: #fff;
        }
        .floatbtn .shalou{
            margin: 16px auto 6px;
            animation: shslouShake .3s infinite;
        }
        .floatbtn .shalou .iconfont{
            color: #fff;
            font-size: 24px;
        }
        @keyframes shalouLoading{
            0%{
                transform: rotate(0);
            }
            50%{
                transform: rotate(180deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @keyframes shslouShake{
            0%{
                transform: rotate(0);
            }
            25%{
                transform: rotate(30deg);
            }
            50%{
                transform: rotate(0);
            }
            75%{
                transform: rotate(-30deg);
            }
            100%{
                transform: rotate(0);
            }
        }
        a{
            text-decoration: none;
        }
        .box-a{
            width:100px;
            height: 100px;
            background-color: red;
            position: absolute;
            /* 0-100 */
            z-index: 1000; 
        }
        .box-b{
            width:100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            z-index: 1500;
        }
        .box-p{
            width:100px;
            height: 100px;
            background-color: rgba(red, green, blue, .1);
            position: absolute;
            z-index: 999;
        }
        .fl{
            float: left;
            width:100px;
            height: 100px;
            background-color: blue;
        }
        .fr{
            float: right;
            width:100px;
            height: 100px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="floatbtn">
           <div class="shalou">
                <i class="iconfont iconshalou"></i>
           </div>
           <div class="txt">待接单</div>
        </div>
        <!-- <div class="box-a"></div>
        <div class="box-p">
            <div class="box-b"></div>
        </div> -->
        
        <div class="box">
           <div class="fl"></div>
           <div class="box-a"></div>
        </div>
    </div>

    
</body>
</html> 